<%@ page import="java.util.List" %>
<%@ page import="cn.com.entity.VipType" %>
<%@ page import="cn.com.entity.User" %>
<%@ page import="java.sql.Date" %>
<%@ page import="cn.com.controler.Util.TimeTr" %>
<%@ page import="java.util.Calendar" %><%--
  Created by IntelliJ IDEA.
  User: DELL
  Date: 2020/10/9
  Time: 23:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>加入Vip</title>
    <script src="/WebContent/JQuery/jquery-3.4.1.js" type="text/javascript"></script>
    <style type="text/css" rel="stylesheet">
        .all{
            width: 800px;
            margin: 0 auto;
            margin-top: 50px;

        }
        .all .list{
            width: 100%;
            margin: 30px 0;

        }
        .all .list .title{
            width: 100%;
            height: 30px;
            line-height: 30px;
            background: #4aa3d6;
        }
        .all .list .cont,.btn{
            width: 100%;
        }
        .all .list .cont{
            padding: 10px;
            box-sizing: border-box;
            text-indent: 35px;
            letter-spacing: 1px;
            line-height: 30px;
        }
        .all .list .btn{
            background: #4aa3d6;
            height: 30px;
            font-size: 16px;
            letter-spacing: 3px;
            border-radius: 20px;
            color: white;
            font-weight: 600;
            border: none;
            cursor: pointer;
        }
        .all .list .btn:hover{
            background: #0192e8;
        }
        .all .list>.into{
            width: 800px;
            height: 400px;
            padding: 10px;
            box-sizing: border-box;
            position: fixed;
            background: white;
            top: 50%;
            left: 50%;
            margin-top: -200px;
            margin-left: -400px;
            display: none;
        }
        .all .list>.into .top{
            width: 100%;
            height: 30px;
            position: relative;
            background: #0192e8;
        }
        .all .list>.into .top .qx{
            width: 16px;
            height: 16px;
            position: absolute;
            right: 10px;
            top: 7px;
            background: url("/WebContent/HTML/UserPage/sc/qx.png") no-repeat;
            cursor: pointer;
        }
        .all .list>.into .top-title{
            width: 100%;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        .all .list>.into .form{
            width: 100%;
            padding: 10px 0;
        }
        .all .list>.into .form .form-list{
            width: 100%;
            height: 30px;
            line-height: 30px;
        }
        .all .list>.into .form .form-list>div.el{
            float: left;
            width: 380px;
            text-align: center;
        }
        .all .list>.into .form .form-list>.sqwhy{
            text-indent: 80px;
        }
        .all .list>.into .form .form-list>.why{
            width: 80%;
            background: white;
            margin: 0 auto;
            height: 100px;
            overflow: auto;
            background: white;
            word-wrap: break-word;
            padding: 10px;
            box-sizing: border-box;
            border: 2px solid #ccc;
        }
        .button{
            width: 100%;
            height: 30px;
            line-height: 30px;
            display: flex;
            justify-content: space-around;
            margin-top: 10px;
        }
        button{
            width: 60px;
            height: 30px;
            border: none;
            background: #4aa3d6;
            color: white;
            font-weight: 600;
            cursor: pointer;
        }
        button:hover{
            background: none;
            color: red;
            border: 1px solid #4aa3d6;
        }
    </style>
</head>
<body>
<article class="all">
    <%
        List list = (List)session.getAttribute("list");
        //获得用户资料
        User user = (User) session.getAttribute("user");
        Integer userId = user.getUserId();
        String username = user.getUsername();
        String userPassword = user.getUserPassword();
        String userEmail = user.getUserEmail();
        String userRegisterTime = user.getUserRegisterTime();
        java.util.Date date = new java.util.Date();
        String totime = TimeTr.Date_String(date);
        //创建Calendar实例
        Calendar cal = Calendar.getInstance();
        cal.setTime(date);
        //加一个月
        cal.add(Calendar.MONTH,1);
        java.util.Date time = cal.getTime();
        String endtime = TimeTr.Date_String(time);
        //遍历集合
        for (int i = 0; i < list.size() ; i++) {
            VipType vipType = (VipType) list.get(i);
            Integer vipTypeId = vipType.getVipTypeId();
            String vipTypeName = vipType.getVipTypeName();
            Integer vipTypeTime = vipType.getVipTypeTime();
            Double vipTypePrice = vipType.getVipTypePrice();
            String vipTypeComment = vipType.getVipTypeComment();
    %>
    <section class="list">
        <div class="title"><span style="color: white;font-weight: 600;margin-left: 100px"><%=vipTypeName%></span> &nbsp;&nbsp;&nbsp;&nbsp;时长：<span style="color: white;font-weight: 600"><%=vipTypeTime%></span>&nbsp;&nbsp;&nbsp;&nbsp;价格：<span style="color: white;font-weight: 600"><%=vipTypePrice%></span></div>
        <div class="cont">
            <%=vipTypeComment%>
        </div>
        <div>
            <button class="btn">申请</button>
        </div>
        <div class="into">
            <div class="top">
                <div class="qx"></div>
            </div>
            <div class="top-title">
                VIP用户申请表资料填写
            </div>
            <div class="form">
                <div class="form-list">
                    <div class="el">
                        用户名：<input type="text" name="username" value="<%=username%>" readonly>
                    </div>
                    <div class="el">
                        密码：<input type="password" name="password" value="<%=userPassword%>" readonly>
                    </div>

                </div>
                <div class="form-list">
                    <div class="el">
                        邮件：<input type="text" name="email" value="<%=userEmail%>" readonly>
                    </div>
                    <div class="el">
                        注册时间：<input type="text" name="zctime" value="<%=userRegisterTime%>" readonly>
                    </div>
                </div>
                <div class="form-list">
                    <div class="el">
                        开始时间：<input type="text" name="kstime" value="<%=totime%>" readonly class="startime">
                    </div>
                    <div class="el">
                        结束时间：<input type="text" name="jstime" value="<%=endtime%>" readonly class="endtime">
                    </div>
                </div>
                <div class="form-list" style="height: auto">
                    <div class="sqwhy">
                        申请原因
                    </div>
                    <div class="why" tabindex="1" contenteditable="true">

                    </div>
                </div>
                <div class="button">
                    <button class="tijiao">提交</button>
                    <button type="reset">重置</button>
                </div>
            </div>
        </div>
    </section>
    <%
        }
    %>

</article>
<script>
    $(document).ready(function () {
        $("button.btn").click(function () {
            $(".into").css("display","block");
        })
        $(".qx").click(function () {
            $(".into").css("display","none");
        })
        $("input").focus(function () {
             $(this).css("border","1px solid #4aa3d6");
        }).blur(function () {
            $(this).css("border","1px solid #cccccc");
        })
        $(".why").focus(function () {
            $(".why").css("border","2px solid #4aa3d6");
        }).blur(function () {
            $(".why").css("border","2px solid #cccccc");
        })
        //发送申请
        $(".tijiao").click(function () {
             var uname = '<%=username%>';
             var pass = '<%=userPassword%>';
             var usereml = '<%=userEmail%>';
             var zctime = '<%=userRegisterTime%>';
             var startimr = '<%=totime%>';
             var endtime = '<%=endtime%>';
             var cont1 = $(".why").text();
             var cont = $.trim(cont1);
             var url = "/VipTypeCZ?type=tj&username="+uname+"&password="+pass+"&useremail="+usereml+"&zctime="+
                     zctime+"&kstime="+startimr+"&jstime="+endtime+"&cont="+cont;
             $.ajax({
                 url:url,
                 type:"post",
                 dataType:"text",
                 success:function (date) {
                     if(date == '0'){
                         alert("已提交Vip申请，请留意处理进度！")
                     }else if(date == '1'){
                         alert("提交成功，请查看处理进度！");
                         window.location.reload();
                     }else if(date == '2'){
                         alert("系统异常，请联系管理员！")
                     }
                 },
                 error:function () {
                     alert("提交失败！");
                 }
             })

        })
    })
</script>
</body>
</html>